<template>
  <el-pagination layout='total, sizes , prev, pager, next, ->'
        :small="smallSize"
        :hide-on-single-page="hideOnSinglePage"
        :page-sizes="pager.pageSizeOptions"
        :total="pager.totalRows"
        :default-page-size = "pager.defaultPageSize"        
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        @update:current-page="currentPageUpdate"                   
        @update:page-size="pageSizeUpdate"
  ></el-pagination>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Pager } from '@/common/dayu-common'
export default defineComponent({
  props:{
    pager:{ type: Pager, required: true },
    size:{ type: String, default:'normal' },
    showTotal:{ type:Function, default:(total:number, range:Array<number>) => {
      let rangeStr = `${range[0]}-${range[1] || 0}条`; 
      rangeStr = rangeStr.padEnd(6,' ');//固定宽度，防止后面的文字抖动
      rangeStr = rangeStr.replaceAll(' ', '\u2002');// \u2002 == ensp   \u00a0 == nbsp   \u2003 == emsp
      let totalText = `共 ${total} 条记录，当前第` + rangeStr; 
      return totalText;
    }},
    hideOnSinglePage:{type: Boolean, default:false},
  }, 
  data(){
    return{      
      
    }
  },
  computed:{
    smallSize(){
      return this.size == "small";
    }
  },
  watch:{
    
  },
  methods:{
    currentPageUpdate(page: number){
      let self = this;
      if(self.pager){
        self.pager.pageIndex = page;
      }
      self.emitPageChange(self.pager.pageIndex, self.pager.pageSize);
    },
    
    pageSizeUpdate(pageSize: number){
      let self = this;
      if(self.pager){
        self.pager.pageIndex = 1;//每页条数发生变化时，始终回到第一页。因为此事件发生后，才会触发 currentPageUpdate
        self.pager.pageSize = pageSize;
      }
      self.emitPageChange(self.pager.pageIndex, self.pager.pageSize);
    },

    emitPageChange(pageIndex: number, pageSize: number){
      this.$emit('change', { pageIndex, pageSize })
    }
  },
  emits: ['change']
})
</script>
